<template>
  <div class="wrap">
    <div class="verification_code">输入验证码</div>
    <div class="tip">请先完成身份校验</div>
    <up-form :label-style="{fontSize: '32rpx', color: 'rgba(0,0,0,0.85)', lineHeight: '44rpx'}" :model="form" label-width="80">
      <up-form-item label="验证码">
        <up-input v-model="form.code" border="none" maxlength="6" placeholder="请输入验证码" placeholder-class="placeholder" />
      </up-form-item>
    </up-form>
    <up-code
      ref="uCodeRef"
      :seconds="seconds"
      @change="codeChange"
    />
    <div class="get_code flex_cen_cen">
      <up-button :custom-style="{width: '250rpx', backgroundColor: '#1890FF'}" type="primary" @tap="getCode">{{ tips }}</up-button>
    </div>
    <div :style="keepBottomSafeDis()" class="suction_bottom_btn">
      <Button :disabled="!canCommit" size="L" @confirm="nextStepFn">下一步</Button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import Button from '@C/Button.vue'
import { keepBottomSafeDis, Router } from '@U/common'
import { Msg } from '@C/Msg'
import { sendUpdateAccountSms, checkUpdateAccountSms } from './request'

const form = reactive({
  code: '',
})
const tips = ref('')
const seconds = ref(60)
const uCodeRef = ref()

const codeChange = (text: string) => {
  tips.value = text
}

const getCode = async () => {
  if (uCodeRef.value.canGetCode) {
    const { code } = await sendUpdateAccountSms().finally(() => {})
    if (code === 200) {
      Msg({ msg: '验证码已发送' })
      uCodeRef.value.start()
    }
  } else {
    Msg({ msg: '请倒计时结束后发送' })
  }
}
const canCommit = computed(() => form.code.length === 6)
const nextStepFn = async () => {
  if (!canCommit.value) return
  const { code } = await checkUpdateAccountSms({ code: form.code }).finally(() => {})
  if (code === 200) Router.push('phone_change_2')
}
</script>

<style lang="less" scoped>
.wrap {
  padding: 80rpx 56rpx 0 66rpx;
  background-color: #fff;
  .verification_code {
    font-weight: 400;
    font-size: 48rpx;
    color: rgba(0,0,0,0.85);
    line-height: 66rpx;
  }
  .tip {
    font-weight: 400;
    font-size: 28rpx;
    color: rgba(0,0,0,0.45);
    line-height: 40rpx;
    margin-bottom: 58rpx;
  }
  /deep/ .placeholder {
    font-size: 32rpx !important;
    color: #BFBFBF;
    line-height: 44rpx;
  }
  .get_code {
    margin-top: 50rpx;
    padding-bottom: 28rpx;
    border-bottom: 2rpx solid rgba(0,0,0,0.1);
  }
}
</style>
